import { Card } from "@/components/base";
import { Typography } from "@/components/typography";
import { Flex } from "@/components/flex";
import { toCurrency } from "@/utils/funs";
import * as UI from '../../ui';
import { PageController } from '../../page-controller';
import React from "react";
import { useObserver } from "mobx-react-lite";

const { Text } = Typography;

/**  套餐&会员卡 */
export function PackagesCard() {
    const pageController = React.useContext(PageController.Context);
    const customerStoredValueCards = useObserver(() => pageController.customerStoredValueCards);
    const data = useObserver(() => pageController.data);

    return (
        <Card style={{ marginBottom: '16px' }}>
            <Text size={16} strong style={{ display: 'block', marginBottom: '12px' }}>
                套餐&会员卡
            </Text>

            {/* 会员卡 */}
            <div style={{
                background: 'linear-gradient(135deg, #e91e63, #ad1457)',
                borderRadius: '8px',
                padding: '16px',
                color: 'white',
                marginBottom: '16px'
            }}>
                <Flex justify="space-between" align="center">
                    <div>
                        <Text size={16} strong style={{ color: 'white', display: 'block' }}>
                            剩余金额
                        </Text>
                        <Text size={12} style={{ color: 'white', opacity: 0.8 }}>
                            钻石
                        </Text>
                    </div>
                    <Flex vertical align="flex-end">
                        <Text size={18} strong style={{ color: 'white' }}>
                            {toCurrency(customerStoredValueCards?.statistics.totalBalance || 0)}
                        </Text>
                        <Text size={12} style={{ color: 'white', opacity: 0.8 }}>
                            {data?.currentPoints} 积分
                        </Text>
                    </Flex>
                </Flex>
            </div>

            {/* 套餐列表 */}
            < UI.PackageList />

            {/* 会员卡剩余金额 */}
            <UI.MembershipCardList />
        </Card>
    );
}
